<template>
  <view class="add">
    <view class="add-header">
      <t-icon name="chevron-left" size="26" @click="onBack" />
      <text class="add-header-title">新增请求</text>
    </view>
    <t-form
      ref="formRef"
      :data="formData"
      :rules="rules"
      reset-type="initial"
      show-error-message
      label-align="left"
      scroll-to-first-error="smooth"
    >
      <Card title="基本信息">
        <t-form-item label="主题" name="ztnr" :requiredMark="true">
          <t-input v-model="formData.ztnr" borderless placeholder="请输入" clearable></t-input>
        </t-form-item>
        <t-form-item label="请求对象" name="qqdx" requiredMark arrow>
          <t-input v-model="formData.qqdx" borderless placeholder="请选择" @click="qqdxSelect.onOpen"></t-input>
          <t-popup v-model="qqdxSelect.show" placement="bottom">
            <t-picker
            title="请求对象"
            v-model="qqdxSelect.pickValue"
            :columns="[qqdxSelect.option]"
            @cancel="qqdxSelect.onCancel"
            @confirm="qqdxSelect.onConfirm" />
          </t-popup>
        </t-form-item>
        <t-form-item label="请求时间" name="qqsj" requiredMark arrow>
          <t-input v-model="formData.qqsj" borderless placeholder="请选择" @click="qqsjSelect.onOpen"></t-input>
          <t-popup v-model="qqsjSelect.show" placement="bottom">
            <t-date-time-picker
              v-model="qqsjSelect.pickValue"
              mode="date"
              title="请求时间"
              start="2000-12-4"
              format="YYYY-MM-DD"
              @confirm="qqsjSelect.onConfirm"
              @cancel="qqsjSelect.onCancel"
            />
          </t-popup>
        </t-form-item>
        <t-form-item label="类别" name="jjcd" requiredMark>
          <t-radio-group v-model="formData.jjcd" class="row-radio" borderless>
            <t-radio icon="line" :block="false" name="jjcd" value="业务">
              <t-tag size="large" :variant="formData.jjcd == '业务' ? 'outline' : 'light'" theme="primary">业务</t-tag>
            </t-radio>
            <t-radio icon="line" :block="false" name="jjcd" value="系统">
              <t-tag size="large" :variant="formData.jjcd == '系统' ? 'light' : 'outline'" theme="danger">系统</t-tag>
            </t-radio>
          </t-radio-group>
        </t-form-item>
      </Card>
      <Card title="请求人">
        <t-form-item label="民警姓名" name="cjrmc">
          <t-input readonly v-model="formData.cjrmc" borderless></t-input>
        </t-form-item>
        <t-form-item label="民警警号" name="cjrjh">
          <t-input readonly v-model="formData.cjrjh" borderless></t-input>
        </t-form-item>
        <t-form-item label="民警单位" name="zzmc">
          <t-input readonly v-model="formData.zzmc" borderless></t-input>
        </t-form-item>
        <t-form-item label="民警电话" name="cjrlxdh" requiredMark>
          <t-input v-model="formData.cjrlxdh" borderless placeholder="请输入" clearable clearTrigger="focus"></t-input>
        </t-form-item>
      </Card>
      <Card title="详细内容">
        <t-form-item label="请求内容" name="nrms" requiredMark>
          <t-textarea v-model="formData.nrms" indicator borderless :maxlength="200" placeholder="请输入" clearable></t-textarea>
        </t-form-item>
      </Card>
    </t-form>
    <t-fab :icon="iconFunc" text="确认新增" class="main-btn" @click="onConfirm" />
  </view>
</template>

<script setup>
import Card from '@/components/Card.vue'
import { reactive, ref, computed, h } from 'vue';
import { AddIcon } from 'tdesign-icons-vue-next';

const iconFunc = () => h(AddIcon, { size: '20px' });
const userInfo = computed(() => uni.$localStorage.getUserInfo())
const formRef = ref(null);
const formData = reactive({
  ztnr: '',
  qqdx: '',
  qqsj: '',
  jjcd: '业务',
  cjrmc: userInfo.value.mjmc,
  cjrjh: userInfo.value.mjjh,
  zzmc: userInfo.value.zzmc,
  cjrlxdh: userInfo.value.lxdh,
  nrms: ''
});
const qqdxSelect = reactive({
  show: false,
  pickValue: [],
  option: [{  label: '基础管控中心', value: '基础管控中心' }],
  onOpen: () => qqdxSelect.show = true,
  onCancel: () => qqdxSelect.show = false,
  onConfirm: valueList => {
    formData.qqdx = valueList[0];
    qqdxSelect.show = false;
  }
})
const qqsjSelect = reactive({
  show: false,
  pickValue: new Date().getTime(),
  onOpen: () => qqsjSelect.show = true,
  onCancel: () => qqsjSelect.show = false,
  onConfirm: value => {
    formData.qqsj = value;
    qqsjSelect.show = false;
  }
})
const rules = {
  ztnr: [{ validator: val => val !== '', message: '请输入' }, { validator: val => val.length <= 10, message: '最大字数10字' }],
  qqdx: [{ validator: val => val !== '', message: '请选择' }],
  qqsj: [{ validator: val => val !== '', message: '请选择' }],
  jjcd: [{ validator: val => val !== '', message: '请选择' }],
  qqnr: [{ validator: val => val !== '', message: '请输入' }],
  cjrlxdh: [{ validator: val => val !== '', message: '请输入' }, { validator: val => /^[1][3,4,5,7,8,9][0-9]{9}$/.test(val), message: '手机号不合法' }],
};

const onConfirm = async () => {
  const res = await formRef.value.validate();
  if (res !== true) return;
  console.log('提交', res);
  uni.$message.success('新增成功');
  uni.navigateBack();
}

const onBack = () => {
  uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.add {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: $uni-text-color;
  background: linear-gradient(to bottom, #a1d6fe 0vh, #fafbff 20%);

  &::after {
    content: '';
    position: fixed;
    z-index: 0;
    right: -1vh;
    top: -1vh;
    width: 50%;
    height: 6vh;
    filter: blur(8px);
    background: linear-gradient(232deg, rgba(181, 174, 255, 1), rgba(161, 214, 254, 0.2));
  }

  &-header {
    z-index: 2;
    position: relative;
    padding: 12px;

    &-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 18px;
      font-weight: 500;
    }
  }

  .t-form {
    flex: 1;
    overflow: auto;
    padding: 12px;
    padding-top: 0;
    height: 100%;
    background-color: transparent;
    padding-bottom: 80px;
  }
}
</style>